/*
 * @Author: ZARR 
 * @Date: 2018-04-04 14:29:53 
 * @Last Modified by: LIWEI
 * @Last Modified time: 2019-03-11 21:35:51
 * @作用:视频详情页
 */

<template>
  <div id="tutorial">
      <div class="titleBar" :style="{'backgroundImage' : (!isMobile ?  `url(https://cdn.swellpro.cn/video/video-pic.jpg)` : `url(https://cdn.swellpro.cn/video/videoMobile.jpg)`)}">
        <div>
            <h1>斯威普飞行教程</h1>
        </div>
      </div>
      <div class="types">
        <div class="container">
           <div  v-for="(data, index) in videoData" :key="index" :class="[flag == index ? 'active' : '','type']" @mouseover.prevent="selectFlag(index)" @click.prevent="selectFlag(index)">{{data.type}}</div>
        </div>
      </div>
      <div class="videos">
          <div class="container">
              <div class="video" v-for="(videos, index) in videoData" :key="index" v-show="flag == index">
                  <div class="singleVideo" v-for="(singelVideo, index) in videos.video" :key="index" @click="show(singelVideo.url)">
                    <div>
                        <div class="imgContent">
                            <img :src="singelVideo.backImg" alt="">
                            <div class="iconContent">
                                <div class="icon">
                                    <i class="iconfont icon-bofang"></i>
                                </div>
                            </div>    
                        </div>
                        <p class="title">
                            {{singelVideo.name}} 
                        </p>
                    </div>
                  </div>
              </div>
          </div>
      </div>
      <div id="mask" v-show="videoPlay" @click.prevent="showMask(false)">
          <div class="playContent" ref="playContent" @click.stop="showMask(true)">
              <iframe frameborder="0" width="100%" height="100%" :src="videoSrc" allowfullscreen></iframe>
          </div>
      </div>
  </div>
</template>

<script>
import {chectIsMobile} from '~/assets/util'
export default {
  data () {
    return {
        isMobile: false,
        videoData:[
            {
                type:'水手三代',
                video:[
                    {
                        name: '水手3云台相机连接与设置',
                        backImg: 'https://cdn.swellpro.cn/video/video10.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=s0530jtuepn&tiny=0&auto=0'
                    },
                    {
                        name: '注意事项',
                        backImg: 'https://cdn.swellpro.cn/video/video11.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=w0539fcry33&tiny=0&auto=0'
                    },
                    {
                        name: '云台校准',
                        backImg: 'https://cdn.swellpro.cn/video/video12.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=p0527ypyjgy&tiny=0&auto=0'
                    },
                    {
                        name: '遥控器油门模式切换与摇杆校准',
                        backImg: 'https://cdn.swellpro.cn/video/video13.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=n0538kv9xjo&tiny=0&auto=0'
                    },
                    {
                        name: '地面站使用教学',
                        backImg: 'https://cdn.swellpro.cn/video/video14.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=n0565bco59u&tiny=0&auto=0'
                    },
                    {
                        name: '钓鱼教程',
                        backImg: 'https://cdn.swellpro.cn/video/video15.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=p0521vmvoin&tiny=0&auto=0'
                    },
                    {
                        name: '水手开箱',
                        backImg: 'https://cdn.swellpro.cn/video/video5.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=k0538i5ps2c&tiny=0&auto=0'
                    },
                    {
                        name: '图传发射机的调节',
                        backImg: 'https://cdn.swellpro.cn/video/video6.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=f052615wdkt&tiny=0&auto=0'
                    },
                    {
                        name: '磁罗盘校准及加速度计校准',
                        backImg: 'https://cdn.swellpro.cn/video/video7.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=i0523ei7dio&tiny=0&auto=0'
                    },
                    {
                        name: '首次飞行',
                        backImg: 'https://cdn.swellpro.cn/video/video8.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=v0523ky47vc&tiny=0&auto=0'
                    }
                ]
            },
            {
                type:'穿越机',
                video:[
                    {
                        name: '雨燕开箱',
                        backImg: 'https://cdn.swellpro.cn/video/video4.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=n03798gmhiq&tiny=0&auto=0'
                    },
                    {
                        name: '雨燕首次飞行',
                        backImg: 'https://cdn.swellpro.cn/video/video3.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=b0385i2007m&tiny=0&auto=0'
                    },
                    {
                        name: '雨燕基本功能与注意事项',
                        backImg: 'https://cdn.swellpro.cn/video/video2.jpg',
                        url: 'https://v.qq.com/iframe/player.html?vid=e037946i6mo&tiny=0&auto=0'
                    },
                ]
            }
        ],
        flag:0,
        topToScreen:0,
        videoPlay:false,
        screenHeight:0,
        videoSrc:''
    };
  },

  head() {
    return {
        title: '',
        meta: [
               { hid: 'description', name: 'description', content: ''},
               { hid: 'keywords', name: 'keywords', content: ''}
        ]
    }
  },

  components: {},

  computed: {},

  mounted(){
      this.init();
  },

  methods: {
      init(){
          if(chectIsMobile())
          this.isMobile = true;
          this.screenHeight = window.innerHeight;
          window.onscroll = ()=>{ //获取滚动条离浏览器顶部的距离
    		   var e=document.documentElement.scrollTop||document.body.scrollTop;
               this.topToScreen = e;
          };
          this.beCenter(0);
      },
      selectFlag(index){
          this.flag = index;
      },
      beCenter(flag){
          let pos;
          if(this.isMobile)
          pos = 300;
          else
          pos = 500;
          this.$refs.playContent.style.marginTop = `${(this.screenHeight - pos)/2 + flag}px`;
      },
      showMask(flag){
          this.videoPlay = flag;
          if(flag == false)
          this.videoSrc = '';
      },
      show(url){
          this.showMask(true);
          this.videoSrc = url;
      }
  },

  watch: {
      topToScreen(newVal){
          this.beCenter(newVal);
      }
  }
}

</script>
<style lang='stylus' scoped>
#tutorial
    background #f8f8f8
    .titleBar
        background-repeat no-repeat
        background-size cover
        background-position center
        height 600px
        display flex
        justify-content center
        align-items center
        color #fff
        font-weight 100
        h1
            font-weight 100
            font-size 30px
            padding-bottom 30px
    .types
        .container
            padding-top 20px
            display flex
            .type
                flex 1
                text-align center
                font-weight 100
                font-size 20px
                padding-bottom 15px
                position relative
                &:after
                    position absolute
                    content ''
                    bottom 0px
                    width 100%
                    height 1px
                    left 0px
                    background #f26444
                    transition all .3s
                    transform scale(0)
            .active
                color #f26444
                &:after
                    transform scale(1)
    .videos
        padding 20px 0 50px
        .container
            .video
                display flex
                flex-flow row wrap
                .singleVideo
                    margin-top 30px
                    flex 0 0 25%
                    color #000
                    transition all .6s
                    box-sizing border-box
                    padding 0 8px
                    >div
                        transition all .6s
                        &:hover
                            transform translateY(-5px)
                            box-shadow 0 15px 30px rgba(0,0,0,.1)
                            .imgContent
                                .iconContent
                                    .icon
                                        background #f26444
                        .imgContent
                            position relative
                            img
                                width 100%
                                display block
                            .iconContent
                                position absolute
                                left 0px
                                top 0px
                                width 100%
                                height 100%
                                display flex
                                justify-content center
                                align-items center
                                .icon
                                    width 54px
                                    height 34px
                                    border 2px solid #fff
                                    background rgba(0,0,0,.6)
                                    border-radius 6px
                                    transition all .6s
                                    .icon-bofang
                                        color #fff
                                        font-size 25px
                                        margin-left 16.5px
                                        margin-top 3px
                                        display block
                        .title
                            text-align center
                            font-weight 100
                            padding 15px 0
                            background #fff
    #mask
        position absolute
        z-index 110
        left 0px
        top 0px
        width 100%
        height 100%
        background rgba(0,0,0,.5)
        display flex
        justify-content center
        .playContent
            width 900px
            height 500px
            background #fff
@media (max-width 600px)
    #tutorial
        .titleBar
            height 400px
        .videos
            .container
                .video
                    .singleVideo
                        flex 0 0 100%
        .types
            .container
                padding-left 0px
                padding-right 0px
        #mask
            .playContent
                width 100%
                height 300px


</style>